<template>
  <div class="visual-angle">
    <div class="box1" />
    <span class="visual-angle-1">计划员视角</span>
    <div class="box2" />
    <span class="visual-angle-2">供应商视角</span>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
  .visual-angle {
    display: flex;
    align-items: center;

    .box1,
    .box2 {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }

    .box1 {
      background: #f9e688;
    }

    .box2 {
      margin-left: 8px;
      background: #99c9ff;
    }

    .visual-angle-1 {
      color: #f9e688;
    }

    .visual-angle-2 {
      color: #99c9ff;
    }
  }
</style>
